<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Leanote</title>

<!-- Bootstrap core CSS -->

<link href="css/bootstrap.css" rel="stylesheet">
<!-- 先加载, 没有样式, 宽度不定 -->
<link rel="stylesheet" href="tinymce/skins/custom/skin.min.css"type="text/css">
<!-- leanote css -->
<link rel="stylesheet" href="css/style.css"type="text/css">
<link href="css/se7en-font.css" rel="stylesheet">
<link href="css/font-awesome-4.2.0/css/font-awesome.css" rel="stylesheet">

<script>
function log(o) {
  console.log(o);
}
</script>

</head>

<body>
<div id="page">
<div id="pageInner">

<!-- 头部 -->
<!-- <div id="headerContainer"> -->
<div id="header">

 <!--  <div id="headerLeft" class="pull-left">
    asdfsd
  </div>

 -->  
  <div id="logo" class="pull-left">
    Leanote
    <!-- <img class="is_img" src="images/invis.gif" alt="leanote"> -->
  </div>

  <!-- search -->
  <div class="pull-left">
    <form class="navbar-form form-inline col-lg-2 hidden-xs" id="searchNote">
      <input class="form-control" placeholder="Search" type="text">
    </form> 
  </div>

  <!-- avatar -->
  <div class="pull-right" style="margin: 0 10px">
     <div class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" style="line-height: 60px;">
          <img src="images/avatar.png" style="height: 40px; border: 1px solid #ccc"/>
          life
          <i class="fa fa-angle-down"></i> 
        </a>
        <ul class="dropdown-menu" role="menu">
          <li role="presentation">
              <i class="fa fa-info"></i>
            <a role="menuitem" tabindex="-1" href="#">
              个人信息</a>
          </li>
          <li role="presentation">
            <i class="fa fa-cog"></i>
            <a role="menuitem" tabindex="-1" href="#">
              设置</a>
          </li>
        </ul>
      </div>
  </div>


  <ul id="setting" class="pull-right">
     <li class="dropdown messages">
      <a class="dropdown-toggle" data-toggle="dropdown">
        <span aria-hidden="true" class="icon se7en-flag"></span>
        <div class="sr-only">
          Messages
        </div>
        <p class="counter">
          3
        </p>
      </a>
      <ul class="dropdown-menu">
        <li><a href="#">
            Could we meet today? I wanted...</a>
          </li>
          <li><a href="#">
            Important data needs your analysis...</a>
          </li>
          <li><a href="#">
            Buy Se7en today, it's a great theme...</a>
          </li>
      </ul>
    </li> 

      <li class="dropdown settings">
        <a class="dropdown-toggle" data-toggle="dropdown">
          <span aria-hidden="true" class="icon se7en-gear"></span>
          <div class="sr-only">
            Settings
          </div>
        </a>
        <ul class="dropdown-menu">
          <li>
            <a class="settings-link blue"><span></span>Blue</a>
          </li>
          <li>
            <a class="settings-link green"><span></span>Green</a>
          </li>
          <li>
            <a class="settings-link orange"><span></span>Orange</a>
          </li>
          <li>
            <a class="settings-link magenta"><span></span>Magenta</a>
          </li>
          <li>
            <a class="settings-link gray"><span></span>Gray</a>
          </li>
        </ul>
      </li>
    </ul>

  <div style="clear: both"></div>
</div>
<!-- </div> -->

<div id="mainContainer" class="clearfix">
  <div id="notebook">
    <div class="folderNote opened">
      <div class="folderHeader">
        <a >
          <h1>
            <i class="fa fa-angle-down"></i>
            My Notes
          </h1>
        </a>
      </div>
      <ul class="folderBody">
        <li><a class="active">Hadoop</a></li>
        <li><a>August 13, 2013</a></li>
        <li><a>Node webkit</a></li>
        <li><a>Hadoop</a></li>
        <li><a>Node webkit</a></li>
      </ul>
    </div>
    <div class="folderNote opened" id="myTag">
      <div class="folderHeader">
        <a>
          <h1>
            <i class="fa fa-angle-down"></i>
            My Tags</h1>
        </a>
      </div>

      <ul class="folderBody">
        <li>
          <a>
            <span class="label label-red">红色</span> 
            <span class="badge">42</span>
          </a>
        </li>
        <li><a>
          <span class="label label-blue">蓝色</span> <span class="badge">32</span></a> 
        </li>
        <li><a>
          <span class="label label-yellow">黄色</span> <span class="badge">15</span>
        </a></li> 
        <li><a>
          <span class="label label-green">绿色</span>  <span class="badge">90</span>
        </a></li>
        <li><a>
          <span class="label label-default">life</span>  <span class="badge">189</span>
        </a></li>
         <li><a>
          <span class="label label-default">node-webkit</span>  <span class="badge">189</span>
        </a></li>
      </ul>
    </div>

    <div class="folderNote closed">
      <div class="folderHeader">
        <a>
          <h1>
            <i class="fa fa-angle-right"></i> 
            Life's</h1>
        </a>
      </div>
      <ul class="folderBody">
        <li><a>Hadoop</a></li>
        <li><a>Node webkit</a></li>
        <li><a>Hadoop</a></li>
        <li><a>Node webkit</a></li>
      </ul>
    </div>

    <div class="folderNote closed">
      <div class="folderHeader">
        <a>
          <h1>
            <i class="fa fa-angle-right"></i> 
            Life's</h1>
        </a>
      </div>
      <ul class="folderBody" style="display: none">
        <li><a>Hadoop</a></li>
        <li><a>Node webkit</a></li>
        <li><a>Hadoop</a></li>
        <li><a>Node webkit</a></li>
      </ul>
    </div>
  </div>

  <div style="left:200px" class="noteSplit" id="notebookSplitter"></div>

  <div id="noteList">
    <div class="clearfix" id="notesAndSort">
   
      <div class="pull-left">

        <div class="dropdown">
          <a class="ios7-a dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">Hadoop
            <i class="fa fa-angle-down"></i> 
          </a>
          <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" style="left: 5px;">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Hadoop</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Node Webkit</a></li>
          </ul>
        </div>

      </div>

      <div id="sortType">
        <div class="dropdown">
          <a class="ios7-a dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">
            <i class="fa fa-sort-alpha-asc"></i>  
            Sort
            <i class="fa fa-angle-down"></i> 
          </a>
          <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" style="right: 3px; !important; left:-100px;min-width: 100px;">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">创建日期</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">修改日期</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">标题</a></li>
            <li role="presentation" class="divider"></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated </a></li>
          </ul>
        </div>
      </div>

    </div>

    <!-- 笔记缩略 -->
    <div id="noteItemList">


      <div href="#" class="item">
        <div class="item-thumb" style="">
          <img src="images/a.gif"/>
        </div>

        <div class="item-desc" style="">
            <p class="item-title">修改linux系统的时间CST与EDT</p>
            <p class="item-text">初始时间：2012年 09月 14日 星期五 18:15:33 EDT[root@test ~]# mv /etc/localtime /etc/localtime.bak[root@test ~]# ln -s /usr/share/zoneinfo/Asia/Shanghai  /etc/localtime[root@test ~]# date修改后的时间：</p>
        </div>
      </div>
      <div href="#" class="item item-active">
        <div class="item-thumb" style="">
          <img src="images/a.gif"/>
        </div>

        <div class="item-desc" style="">
            <p class="item-title">修改linux系统的时间CST与EDT</p>
            <p class="item-text">初始时间：2012年 09月 14日 星期五 18:15:33 EDT[root@test ~]# mv /etc/localtime /etc/localtime.bak[root@test ~]# ln -s /usr/share/zoneinfo/Asia/Shanghai  /etc/localtime[root@test ~]# date修改后的时间：</p>
        </div>
      </div>
      <div href="#" class="item">
        <div class="item-thumb" style="">
          <img src="images/a.gif"/>
        </div>

        <div class="item-desc" style="">
            <p class="item-title">修改linux系统的时间CST与EDT</p>
            <p class="item-text">初始时间：2012年 09月 14日 星期五 18:15:33 EDT[root@test ~]# mv /etc/localtime /etc/localtime.bak[root@test ~]# ln -s /usr/share/zoneinfo/Asia/Shanghai  /etc/localtime[root@test ~]# date修改后的时间：</p>
        </div>
      </div>

      <div href="#" class="item">
        <div class="item-thumb" style="">
          <img src="images/a.gif"/>
        </div>

        <div class="item-desc" style="">
            <p class="item-title">修改linux系统的时间CST与EDT</p>
            <p class="item-text">初始时间：2012年 09月 14日 星期五 18:15:33 EDT[root@test ~]# mv /etc/localtime /etc/localtime.bak[root@test ~]# ln -s /usr/share/zoneinfo/Asia/Shanghai  /etc/localtime[root@test ~]# date修改后的时间：</p>
        </div>
      </div>

      <div href="#" class="item">
        <div class="item-thumb" style="">
          <img src="images/a.gif"/>
        </div>

        <div class="item-desc" style="">
            <p class="item-title">修改linux系统的时间CST与EDT</p>
            <p class="item-text">初始时间：2012年 09月 14日 星期五 18:15:33 EDT[root@test ~]# mv /etc/localtime /etc/localtime.bak[root@test ~]# ln -s /usr/share/zoneinfo/Asia/Shanghai  /etc/localtime[root@test ~]# date修改后的时间：</p>
        </div>
      </div>
      <div href="#" class="item">
        <div class="item-thumb" style="">
          <img src="images/a.gif"/>
        </div>

        <div class="item-desc" style="">
            <p class="item-title">修改linux系统的时间CST与EDT</p>
            <p class="item-text">初始时间：2012年 09月 14日 星期五 18:15:33 EDT[root@test ~]# mv /etc/localtime /etc/localtime.bak[root@test ~]# ln -s /usr/share/zoneinfo/Asia/Shanghai  /etc/localtime[root@test ~]# date修改后的时间：</p>
        </div>
      </div>
      <div href="#" class="item">
        <div class="item-thumb" style="">
          <img src="images/a.gif"/>
        </div>

        <div class="item-desc" style="">
            <p class="item-title">修改linux系统的时间CST与EDT</p>
            <p class="item-text">初始时间：2012年 09月 14日 星期五 18:15:33 EDT[root@test ~]# mv /etc/localtime /etc/localtime.bak[root@test ~]# ln -s /usr/share/zoneinfo/Asia/Shanghai  /etc/localtime[root@test ~]# date修改后的时间：</p>
        </div>
      </div>
    </div>
 
  </div>
  <div style="left:500px" class="noteSplit" id="noteSplitter"></div>

  <div id="note">
    <!-- 遮罩, 为了resize3Columns用 -->
    <div id="noteMask" style="position: absolute; top: 0px; bottom: 0px; right: 0; left: 10px; z-index: -1"></div>
    <div id="noteTop">
      <!-- 左侧放tag, 右侧放按钮, 比如save, info, move, delete -->
      <div id="tool" class="clearfix">
        <!-- tag可以参考 mac的文件tag, 预定义一些颜色, 用户也可以自己输入-->
        <div class="pull-left" id="tag">
          <div id="tags" style="display: inline-block; line-height: 25px;">
            
          </div>

          <div class="dropdown" style="display: inline-block" id="tagDropdown">
            <i class="fa fa-bookmark-o"></i> 
            <a class="metro-a dropdown-toggle" data-toggle="dropdown" id="addTagTrigger" style="cursor: text; padding-left:0">
              click to add tags
            </a>
            <input type="text" id="addTagInput"/>
            <ul class="dropdown-menu" role="menu" id="tagColor">
              <li role="presentation">
                <span class="label label-red">红色</span>
              </li>
              <li role="presentation">
                <span class="label label-blue">蓝色</span>
              </li>
              <li role="presentation"><span class="label label-yellow">黄色</span></li>
              <li role="presentation"><span class="label label-green">绿色</span></li>
            </ul>
          </div>

        </div>

        <ul class="pull-right" id="editorTool">
          <li>
            <a class="ios7-a dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">
              信息
            </a>
          </li>

          <li>
            <div class="dropdown">
              <a class="ios7-a dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">
                移至
                <i class="fa fa-angle-down"></i> 
              </a>
              <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" style="right: 3px; !important; left:-100px;min-width: 100px;">
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Hadoop</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Javascript</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Html5</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">My Life</a></li>
              </ul>
            </div>
          </li>

          <li>
            <a class="ios7-a " id="leanoteNavTrigger" data-toggle="dropdown">
              文档导航
            </a>
          </li>
          
        </ul>
      </div>

      <div id="noteTitleDiv"><input name="noteTitle" id="noteTitle" value="Bootstrap css"></div>

      <!-- 编辑器 -->
      <div id="mceToolbar" style="">
         
        <div id="popularToolbar" style="position: absolute; right: 30px; left: 0"></div>

        <a style="dispaly: block; position: absolute; cursor: pointer; right: 10px; padding: 3px 10px" id="moreBtn">
          <i class="fa fa-angle-down"></i>
        </a>

      </div>

    </div>

    <div id="editor">
        <div id="leanoteNav">
        </div>
        <!-- 由此可以算高度 -->
        <textarea id="content" name="content">

<h1 id="overview">概览</h1></div><p class="lead">深入了解Bootstrap底层结构的关键部分，包括我们让web开发变得更好、更快、更强壮的最佳实践。</p><h3 id="overview-doctype">HTML5文档类型</h3><p>Bootstrap使用到的某些HTML元素和CSS属性需要将页面设置为HTML5文档类型。在你项目中的每个页面都要参照下面的格式进行设置。</p><div class="highlight"><pre><code class="language-html xml"><span class="doctype">&lt;!DOCTYPE html&gt;</span>
<span class="tag">&lt;<span class="title">html</span> <span class="attribute">lang</span>=<span class="value">"zh-CN"</span>&gt;</span>
  ...
<span class="tag">&lt;/<span class="title">html</span>&gt;</span></code></pre></div><h3 id="overview-mobile">移动设备优先</h3><p>在Bootstrap 2中，我们对框架中的某些关键部分增加了对移动设备友好的样式。而在Bootstrap 3中，我们重写了整个框架，使其一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。也就是说，<strong>Bootstrap是移动设备优先的</strong>。针对移动设备的样式融合进了框架的每个角落，而不是一个单一的文件。</p><p>为了确保适当的绘制和触屏缩放，需要在<code>&lt;head&gt;</code>之中<strong>添加viewport元数据标签</strong>。</p><div class="highlight"><pre><code class="language-html xml"><span class="tag">&lt;<span class="title">meta</span> <span class="attribute">name</span>=<span class="value">"viewport"</span> <span class="attribute">content</span>=<span class="value">"width=device-width, initial-scale=1.0"</span>&gt;</span></code></pre></div><p>在移动设备浏览器上，通过为viewport meta标签添加<code>user-scalable=no</code>可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！</p><div class="highlight"><pre><code class="language-html xml"><span class="tag">&lt;<span class="title">meta</span> <span class="attribute">name</span>=<span class="value">"viewport"</span> <span class="attribute">content</span>=<span class="value">"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"</span>&gt;</span></code></pre></div><h3 id="overview-responsive-images">响应式图片</h3><p>通过添加<code>.img-responsive</code>&nbsp;class可以让Bootstrap 3中的图片对响应式布局的支持更友好。其实质是为图片赋予了<code>max-width: 100%;</code>&nbsp;和<code>height: auto;</code>属性，可以让图片按比例缩放，不超过其父元素的尺寸。</p><div class="highlight"><pre><code class="language-html xml"><span class="tag">&lt;<span class="title">img</span> <span class="attribute">src</span>=<span class="value">"..."</span> <span class="attribute">class</span>=<span class="value">"img-responsive"</span> <span class="attribute">alt</span>=<span class="value">"Responsive image"</span>&gt;</span></code></pre></div><h3 id="overview-type-links">排版和链接</h3><p>Bootstrap设置了全局样式，包括显示、排版和链接。尤其是，我们还：</p><ul><li>为<code>body</code>标签设置了<code>background-color: #fff;</code>样式</li><li>设置了排版的基本属性<code>@font-family-base</code>、<code>@font-size-base</code>和<code>@line-height-base</code></li><li>Set the global link color via&nbsp;<code>@link-color</code>&nbsp;and apply link underlines only on&nbsp;<code>:hover</code></li></ul><p>这些样式可以在<code>scaffolding.less</code>文件中找到。</p><h3 id="overview-normalize">Normalize</h3><p>为了增强跨浏览器表现的一致性，我们使用了<a href="http://necolas.github.io/normalize.css/" target="_blank">Normalize</a>，这是由<a href="http://twitter.com/necolas" target="_blank">Nicolas Gallagher</a>和&nbsp;<a href="http://twitter.com/jon_neal" target="_blank">Jonathan Neal</a>维护的一个reset库。</p><h3 id="overview-container">Containers</h3><p>用<code>.container</code>包裹页面上的内容即可实现居中对齐。在不同的媒体查询阈值范围内都为container设置了<code>max-width</code>，用以匹配栅格系统。</p><div class="highlight"><pre><code class="language-html xml"><span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"container"</span>&gt;</span>
  ...
<span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></pre></div></div><div class="bs-docs-section"><div class="page-header"><h1 id="grid">栅格系统</h1></div><p class="lead">Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的<a href="http://v3.bootcss.com/css/#grid-example-basic">预定义classe</a>，还有强大的<a href="http://v3.bootcss.com/css/#grid-less">mixin用于生成更具语义的布局</a>。</p><h3 id="grid-intro">简介</h3><p>栅格系统用于通过一系列的行（row）与列（column）的组合创建页面布局，你的内容就可以放入创建好的布局中。下面就介绍以下Bootstrap栅格系统的工作原理：</p><ul><li>&ldquo;行（row）&rdquo;必须包含在<code>.container</code>中，以便为其赋予合适的排列（aligment）和内补（padding）。</li><li>使用&ldquo;行（row）&rdquo;在水平方向创建一组&ldquo;列（column）&rdquo;。</li><li>你的内容应当放置于&ldquo;列（column）&rdquo;内，而且，只有&ldquo;列（column）&rdquo;可以作为行（row）&rdquo;的直接子元素。</li><li>类似Predefined grid classes like&nbsp;<code>.row</code>&nbsp;and&nbsp;<code>.col-xs-4</code>&nbsp;这些预定义的栅格class可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。</li><li>通过设置<code>padding</code>从而创建&ldquo;列（column）&rdquo;之间的间隔（gutter）。然后通过为第一和最后一样设置负值的<code>margin</code>从而抵消掉padding的影响。</li><li>栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个<code>.col-xs-4</code>来创建。</li></ul><p>通过研究案例，可以将这些原理应用到你的代码中。</p><div class="bs-callout bs-callout-info"><h4>栅格与全宽布局Grids and full-width layouts</h4><p>对于需要占据整个浏览器视口（viewport）的页面，需要将内容区域包裹在一个容器元素内，并且赋予<code>padding: 0 15px;</code>，为的是抵消掉为<code>.row</code>所设置的<code>margin: 0 -15px;</code>（如果不这样的话，你的页面会左右超出视口15px，页面底部出现横向滚动条）。</p></div><h3 id="grid-media-queries">媒体查询</h3><p>在栅格系统中，我们在LESS文件中使用以下媒体查询（media query）来创建关键的分界点阈值。</p><div class="highlight"><pre><code class="language-css"><span class="comment">/* Extra small devices (phones, less than 768px) */</span>
<span class="comment">/* No media query since this is the default in Bootstrap */</span>

<span class="comment">/* Small devices (tablets, 768px and up) */</span>
<span class="at_rule">@<span class="keyword"><span class="keyword">media</span></span> (min-width: @screen-sm-min) </span>{ ... }

<span class="comment">/* Medium devices (desktops, 992px and up) */</span>
<span class="at_rule">@<span class="keyword"><span class="keyword">media</span></span> (min-width: @screen-md-min) </span>{ ... }

<span class="comment">/* Large devices (large desktops, 1200px and up) */</span>
<span class="at_rule">@<span class="keyword"><span class="keyword">media</span></span> (min-width: @screen-lg-min) </span>{ ... }</code></pre></div><p>We occasionally expand on these media queries to include a&nbsp;<code>max-width</code>&nbsp;to limit CSS to a narrower set of devices.</p><div class="highlight"><pre><code class="language-css"><span class="at_rule">@<span class="keyword"><span class="keyword">media</span></span> (max-width: @screen-xs-max) </span>{ ... }
<span class="at_rule">@<span class="keyword"><span class="keyword">media</span></span> (min-width: @screen-sm-min) and (max-width: @screen-sm-max) </span>{ ... }
<span class="at_rule">@<span class="keyword"><span class="keyword">media</span></span> (min-width: @screen-md-min) and (max-width: @screen-md-max) </span>{ ... }
<span class="at_rule">@<span class="keyword"><span class="keyword">media</span></span> (min-width: @screen-lg-min) </span>{ ... }</code></pre></div>

       </textarea>
    </div>

  </div>
</div>

<script src="js/jquery-1.9.0.min.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/javascript" src="tinymce/tinymce.js"></script>
<script src="js/main.js"></script>
</div>
</div>
</body>
</html>
